<template>
  <div class="main_recom" name="mainrecom">
    <div class="recom_box con_width">
      <ul class="goods_box">
        <li class="goods_list" v-for="(item,index) in goodsList" :key="index">
          <router-link to="/comdetail">
            <div class="img_box">
              <img class="goods_img" :src="item.goodsImg" :title="item.goodsName" />
            </div>
            <div class="goods_name">{{item.goodsName}}</div>
            <div class="goods_money">{{item.goodsMoney}}</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "mainrecom",
  data() {
    this._getData();
    return {
      goodsList: []
    };
  },
  //   自定义组件属性
  props: {
    goodsUrl: String
  },
  methods: {
    _getData: function() {
      // 读取 .json 文件中的数据
      var _this = this;
      this.$http.get(_this.goodsUrl).then(function(res) {
        _this.goodsList = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./MainRecom.scss";
</style>